<!--  -->
<template>
  <div class="hotsnew">
    <!-- 原有的信息卡片 -->
    <div class="card">
      <div class="card-image">
        <img src="../../assets/img/new1.png" alt="图片描述" />
      </div>
      <div class="card-content">
        <div class="card-title">{{ title }}</div>
        <div class="card-text">{{ content }}</div>
        <div class="card-time">{{ time }}</div>
      </div>
    </div>
    
    <!-- 新的信息卡片 -->
    <div class="card">
      <div class="card-image">
        <img src="../../assets/img/new2.png" alt="图片描述" />
      </div>
      <div class="card-content">
        <div class="card-title">{{ title2 }}</div>
        <div class="card-text">{{ content2 }}</div>
        <div class="card-time">{{ time2 }}</div>
      </div>
    </div>
    <div class="card">
      <div class="card-image">
        <img src="../../assets/img/new3.png" alt="图片描述" />
      </div>
      <div class="card-content">
        <div class="card-title">{{ title3 }}</div>
        <div class="card-text">{{ content3 }}</div>
        <div class="card-time">{{ time3 }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "“职”点迷津，逐梦起航——机械工程学院优秀毕业生经验分享交流会",
      content:
        "（通讯员 张钰泉）为充分发挥优秀毕业生的示范引领作用，引导、鼓励在校生奋发进取，做好自身规划，2023年5月25日下午，机械工程学院在学术楼3号报告厅召开优秀毕业生经验分享交流会。此次会议邀请到了四位有不同代表性的优秀毕业生进行分享，通过线上线下相结合的方式开展。机械工程学院党总支书记戴永清、学生科科长汪萃萃、团总支书记易俐君，以及学生科全体辅导员老师出席本次会议。",
      time: "2023-06-01",

      title2: "与绿植同行，镌刻青春底色——机械工程学院开展大学生劳动教育实践活动",
      content2:
        "（通讯员 张钰泉）为培养劳动实践能力，践行志愿服务精神，进一步加快构建德智体美劳全面培养的教育体系，2023年5月23日，机械工程学院组织团学干部及机设2203班全体成员一行30余人前往武汉市园林科学研究院科研中试基地开展“与绿植同行，镌刻青春底色”大学生劳动教育实践活动。",
      time2: "2023-06-02",

      title3: "探索“智能制造” 体验职教魅力 小学生走进机械工程学院智能工厂",
      content3:
        "“哇，这个机器人好灵活！”“太先进了！完全想不到它是3D技术打印出来的。”在机械工程学院智能工厂里，一群小学生围在一起，对机器人和3D打印机等表现出浓厚的兴趣。5月19日，正值职业教育活动周，机械工程学院的老师和“智启童萌”青少年空间团队志愿者带领光谷十五小的学生代表参观智能工厂，开启“智能制造”的探索之旅。",
      time3: "2023-06-02",
    };
  },
};
</script>

<style  scoped>
.hotsnew{
  width: 55%;
}
.card {
  display: flex;
  align-items: center; /* 垂直居中 */
  background-color: #f8f9fb;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  margin-bottom: 10px;
}
.card:hover{
  background-color: #F8F9F3;
}
.card-image {
  width: 120px; /* 图片宽度 */
  height: 120px; /* 图片高度 */
  flex-shrink: 0; /* 不缩放 */
  overflow: hidden;
}

.card-image img {
  width: 100%; /* 图片宽度 */
  height: auto; /* 等比例缩放 */
}

.card-content {
  padding: 16px; /* 内边距 */
  flex: 1; /* 自动填充空间 */
}

.card-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-text {
  font-size: 16px;
  margin-bottom: 10px;
  line-height: 1.6;
}

.card-time {
  font-size: 14px;
  color: #999;
}
</style>
